<template>
	<div class="add-jq-dialog">
		<!--设置 转发配置-->
		
		
		<appdialog 
			ref="dialog"
			:visible="false" 
			title="设置转发配置"
			@confirm="confirmAdd"
			@cancle="cancleAdd"
			width="800px"
			>
			
			<el-form 
				ref="addForm" 
				:rules="rules" 
				:model="addForm"
				label-width="120px"
				>
				
				<el-form-item label="转发名称：" prop="name">
					<el-input style="width: 250px;" placeholder="请输入转发名称" v-model="addForm.name"></el-input>
				</el-form-item>
				
				<el-form-item label="启用：" prop="status">
					<el-switch
					  v-model="statusSwitch"
					  active-text="是"
					  inactive-text="否">
					  
					</el-switch>
				</el-form-item>
				
				<el-form-item label="协议：" prop="protocol">
					<xieyiSelect
						ref="xieyiSelect"
						:defaultValue="addForm.protocol"
						 @change="xyChange"></xieyiSelect>
				</el-form-item>
				
				<el-form-item label="请求规则：" prop="balance">
					<suanfaSelect
						ref="suanfaSelect"
						:defaultValue="addForm.balance"
						 @change="sfChange"></suanfaSelect>
				</el-form-item>
				
				
				<el-form-item label="代理端口：" prop="port">
					<el-input style="width: 120px;" placeholder="请输入代理端口" v-model="addForm.port"></el-input>
				</el-form-item>
				
				
				<el-form-item label="关联应用：" prop="aaaaaaaaaaaa">
					<shiliSelect 
						
						@change="yyChange"></shiliSelect>
					<br />
					<el-tag v-if="selectedSL" type="info">
						<label>应用名:</label>&nbsp;<span>{{selectedSL.templateName}}</span>
						&nbsp;&nbsp;
						<label>应用名:</label>&nbsp;<span>{{selectedSL.shiliName||"-"}}</span>
						&nbsp;&nbsp;
						<label>IP:</label>&nbsp;<span>{{selectedSL.ips.length?selectedSL.ips.join(","):"-"}}</span>
						&nbsp;&nbsp;
						<label>端口:</label>&nbsp;<span>{{selectedSL.ports.length?selectedSL.ports.join(","):"-"}}</span>
					</el-tag>
				</el-form-item>
				
				<el-form-item label="端口转发配置：" prop="detailsInfo">
					
					<addListTable :data="addForm.detailsInfo" :options="portOptions" @change="changePortConfig">
						<template>
							123123
						</template>
					</addListTable>
					
				</el-form-item>
				
			</el-form>
			
			
		</appdialog>
		
		
		
	</div>
</template>

<script>

import appdialog from "@/view/components/dialog/dialog";
import xieyiSelect from "@/view/components/select/xieyiSelect";
import suanfaSelect from "@/view/components/select/suanfaSelect";
import shiliSelect from "@/view/components/select/shiliSelect";
import nameInput from "@/view/components/input/nameInput";
import addListTable from "@/view/components/table/addListTable";

import { forward } from "@/service/swagger/HaproxyController";


export default {
	props: [
		"fzId",
	],
	name: "addZFPZDialog",
	components: {
		appdialog,
		xieyiSelect,
		suanfaSelect,
		shiliSelect,
		nameInput,
		addListTable,
	},
	data() {
		return {
			//statusSwitch : true ,

			addForm: {
				proxyId: this.fzId, // 负载 id
				balance: "", // 算法   roundrobin 
				name: "", // 名称
				protocol: "", //  "协议"
				port: "", // 代理端口
				detailsInfo: [], // 端口转发配置
				status: "0",
			},
			rules: {
				name: [{ required: true, message: '请输入名称！', trigger: 'blur' }],
				port: [{ required: true, message: '请输入端口！', trigger: 'blur'}],
				balance: [{ required: true, message: '请输选择调度算法！', trigger: 'blur' }],
				protocol: [{ required: true, message: '请选择协议！', trigger: 'blur' }]
			},

			selectedSL: null,

			portOptions: {
				editDisabled: false,
				header: [{
					label: "应用IP",
					propName: "host",
					align: "left",
				}, {
					label: "应用端口",
					propName: "port",
				}, {
					label: "最大连接数",
					propName: "maxConnect",
				},],
				defaultNewRow: {
					name: "",
					port: "",
					suanfa: "",
					xieyi: "",
					creatTime: "",
					status: "",
				}
			},

		}
	},
	computed: {
		statusSwitch: {
			get: (vm) => {
				const switchHash = {
					"0": true, // 0 是启用
					"1": false // 1 是不启用
				}
				return switchHash[vm.addForm.status];
			},
			set: function (v) {
				this.addForm.status = v ? "0" : "1";
			}
		},
	},
	mounted() {

	},
	methods: {
		init(data) {
			this.addForm = data || {
				proxyId: this.fzId,
				balance: "", // 算法   roundrobin 
				name: "", // 名称
				protocol: "", //  "协议"
				port: "", // 代理端口
				detailsInfo: [], // 端口转发配置
				status: "0",
			};
			for (let i in this.$refs) {
				if (this.$refs[i].reset) {
					this.$refs[i].reset();
				}
			}
			return this;
		},
		open() {
			this.$refs.dialog.open();
			return this;
		},

		confirmAdd() {
			console.log("确认添加", this.addForm)

			// 验证表单
			this.$refs.addForm.validate((valid) => {
				if (valid) {
					// 验证通过
					this.submitAdd();
				} else {
					setTimeout(() => {
						this.open();
					}, 50)

					return false;
				}
			});
			// 
		},
		submitAdd() {
			forward({ ...this.addForm }).then(ret => {
				if (!ret.code) {
					this.$message({
						message: '操作成功',
						type: 'success',
						duration: 2000,
					});

					this.$refs.dialog.close();
					this.$emit("addSucess")
				} else {
					setTimeout(() => {
						this.open();
					}, 50)

					return false;
				}
			})
		},
		cancleAdd() {

		},


		xyChange(name, v) {
			console.log("协议改变：", name, v)
			this.addForm.protocol = v;
		},
		sfChange(name, v) {
			console.log("算法改变：", name, v)
			this.addForm.balance = v;
		},
		yyChange(name, v, selectedObj) {
			console.log("关联应用改变：", name, v, selectedObj)
			let data = null;
			if (selectedObj.moban[0]) {
				data = {
					templateName: selectedObj.moban[0].label,
					shiliName: selectedObj.shili[0] ? selectedObj.shili[0].label : "",
					ips: [],
					ports: [],
				};
				if (selectedObj.shili[0]) {
					const hostInfo = selectedObj.shili[0].sourceData.hostsInfo;
					if (hostInfo) {
						for (let i in hostInfo) {
							data.ips.push(hostInfo[i].ip)
							data.ports.push(hostInfo[i].ports)
						}
					}
				}
			}
			this.selectedSL = data;
		},

		changePortConfig(name, v) {
			this.addForm.detailsInfo = v;
			console.log("端口配置改变：", name, v)
		}

	}
}
</script>

<style scoped lang="scss">
@import "../../../styles/variables.scss";
</style>